<template>
    <div id="home">
      <div id="Header">
<!--       <div class="left-button">-->
<!--          <i v-if="!isCollapse" class="el-icon-s-fold" @click="handleClose"/>-->
<!--          <i v-if="isCollapse" class="el-icon-s-unfold" @click="handleOpen"/>-->
<!--         &lt;!&ndash;  面包屑导航区域 &ndash;&gt;-->
<!--       </div>-->
<!--        <div class="bread-container">-->
<!--          <span class="breadHome" @click="toHome">首页 </span>-->
<!--          <span >-->
<!--          <span class="separate" id="separate_1"></span>-->
<!--          <span class="breadFont" id="first"></span>-->
<!--          <span class="separate" id="separate_2"></span>-->
<!--          <span class="breadFont" id="second"></span></span>-->
<!--        </div>-->
<!--        <div class="right">-->
<!--          <span class="user-Info ">管理员</span>-->
<!--          <span class="header-icon"> <i class="el-icon-switch-button" @click="Logout"/></span>-->
<!--        </div>-->
        <div class="nav-container">
          <div class="left-container">
<!--            <div class="change" @click="setCollapse">-->
<!--              <el-icon :class="isCollapse?'close el-icon-s-unfold':'close el-icon-s-fold'"/>-->
<!--            </div>-->
<!--            <el-breadcrumb separator="/" class="bread-container">-->
<!--              <el-breadcrumb-item v-for="item of breadcrumbList" :key="item.path">-->
<!--                <span>{{ item.name }}</span>-->
<!--              </el-breadcrumb-item>-->
<!--            </el-breadcrumb>-->
                   <div class="change">
                      <i v-if="!isCollapse" class="el-icon-s-fold" @click="handleClose"/>
                      <i v-if="isCollapse" class="el-icon-s-unfold" @click="handleOpen"/>
                     <!--  面包屑导航区域 -->
                   </div>
                    <div class="bread-container">
                      <span class="breadHome" @click="toHome">首页 </span>
                      <span >
                      <span class="separate" id="separate_1"></span>
                      <span class="breadFont" id="first"></span>
                      <span class="separate" id="separate_2"></span>
                      <span class="breadFont" id="second"></span></span>
                    </div>
          </div>
          <div class="right-container">
            <el-tooltip content="用户身份" placement="bottom">
              <el-tag class="level"> 管理员</el-tag>
            </el-tooltip>
            <el-dropdown class="dropdown" trigger="click" >
              <img class="avatar" :src="adminInfo.headPortrait">
              <i class="el-icon-arrow-down el-icon--right"></i>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item icon="el-icon-s-custom"   @click.native="myInfo">个人中心</el-dropdown-item>
                <el-dropdown-item icon="el-icon-s-operation" @click.native="modifyPwd" >修改密码</el-dropdown-item>
                <el-dropdown-item divided icon="el-icon-moon"  @click.native="Logout">退出登陆</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>

          </div>
        </div>
      </div>

      <div id="Main">
        <el-dialog
          title="修改密码"
          append-to-body
          :visible.sync="dialogVisible"
          width="30%">
          <el-form  status-icon  v-model="form" ref="rules" label-width="100px" class="modifyPwd" :rules="rules">
            <el-form-item label="账号" prop="username">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="原密码" prop="oldPwd">
              <el-input type="password" v-model="form.oldPwd"   autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="password">
              <el-input type="password"  v-model="form.password" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="确认密码" prop="confirmpassword">
              <el-input type="password"  v-model="form.confirmpassword"  autocomplete="off"></el-input>
            </el-form-item>
<!--            <el-form-item>-->
<!--              <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
<!--              <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--            </el-form-item>-->
          </el-form>

          <span slot="footer" class="dialog-footer">
             <el-button @click="dialogVisible = false">重 置</el-button>
    <el-button type="primary" @click="dialogVisible = false">提 交</el-button>
  </span>
        </el-dialog>
<!--        路由占位符-->
        <router-view/>
      </div>

      <div id="Nav">
        <div id="avatar_box">
          <img src="../assets/logo.png" alt="">
        </div>
        <el-menu default-active="1-4-1" class="el-menu-vertical-demo"
                 background-color="#344a5f" text-color="#fff" active-text-color="#fff"
                  :collapse="isCollapse" router>
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-user"></i>
              <span slot="title" >用户管理</span>
            </template>
              <el-menu-item index="/user">用户列表</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-document"></i>
              <span slot="title">帖子管理</span>
            </template>
            <el-menu-item index="/invitations">帖子列表</el-menu-item>
          </el-submenu>

          <el-submenu index="3">
            <template slot="title">
              <i class="el-icon-chat-dot-round"></i>
              <span slot="title">话题管理</span>
            </template>
            <el-menu-item index="/topics/list">话题列表</el-menu-item>
            <el-menu-item index="/topics/add">话题发布</el-menu-item>
          </el-submenu>

<!--          <el-submenu index="4">-->
<!--            <template slot="title">-->
<!--              <i class="el-icon-bell"></i>-->
<!--              <span slot="title">公告管理</span>-->
<!--            </template>-->
<!--            <el-menu-item index="/notice/add">发布公告</el-menu-item>-->
<!--            <el-menu-item index="/notice/list">历史公告</el-menu-item>-->
<!--          </el-submenu>-->

          <el-submenu index="5">
            <template slot="title">
              <i class="el-icon-data-line"></i>
              <span slot="title">数据查看</span>
            </template>
            <el-menu-item index="/data">数据分析</el-menu-item>
<!--            <el-menu-item index="/map/invitations">地图查看</el-menu-item>-->
          </el-submenu>

        </el-menu>
      </div>

    </div>
</template>

<script>

export default {
  name: 'Home',
  data () {
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      if (value.length < 1) {
        this.changeAgainFlag = 2
        return callback(new Error('确认密码不能为空！'))
      } else if (this.form.password !== this.form.confirmpassword) {
        this.changeAgainFlag = 2
        return callback(new Error('两次输入密码不一致！'))
      } else {
        this.changeAgainFlag = 1
        callback()
      }
    }
    return {
      changeAgainFlag: 0,
      isCollapse: false,
      dialogVisible: false,
      admin: {
        user: '',
        pwd: ''
      },
      form: {
        oldPwd: '',
        password: '',
        confirmpassword: '',
        username: ''
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
        confirmpassword: [
          {
            required: true,
            validator: pwdAgainCheck,
            trigger: 'blur'
          }
        ],
        username: [
          { required: true, message: '请输入登录账号', trigger: 'blur' }
        ],
        oldPwd: [
          { required: true, message: '请输入原密码', trigger: 'blur' }
        ]
      },
      adminInfo: {
        adminName: '',
        signature: '',
        headPortrait: '',
        page: 1,
        pageSize: 1,
        updateTime: '',
        createTime: ''
      }
    }
  },
  methods: {
    async getAdminInfo () {
      this.adminInfo.adminName = window.sessionStorage.getItem('username')
      const { data: res } = await this.$http.post('/admin/selectAdminByAccurate/', this.adminInfo)
      // console.log(res)
      // console.log()
      this.adminInfo = res.data.list[0]
      // window.sessionStorage.setItem('adminInfo', res.data.list[0])
      // console.log(this.adminInfo)
    },
    handleOpen () {
      this.isCollapse = false
      const nav = document.getElementById('Nav')
      const main = document.getElementById('Main')
      const header = document.getElementById('Header')
      const logo = document.getElementById('avatar_box')
      /*
       height: 100px;
      width: 100px;
      margin-left: 70px;
      margin-top: 20px;
       */
      logo.style.height = '100px'
      logo.style.width = '100px'
      logo.style.marginLeft = '70px'
      nav.style.width = '250px'
      main.style.left = '250px'
      header.style.left = '250px'
    },
    handleClose () {
      this.isCollapse = true
      const nav = document.getElementById('Nav')
      const main = document.getElementById('Main')
      const header = document.getElementById('Header')
      const logo = document.getElementById('avatar_box')
      /*
       height: 100px;
      width: 100px;
      margin-left: 70px;
      margin-top: 20px;
       */
      logo.style.height = '30px'
      logo.style.width = '30px'
      logo.style.marginLeft = '15px'
      nav.style.width = '64px'
      main.style.left = '64px'
      header.style.left = '64px'
    },
    // 退出登录函数
    Logout () {
      this.$confirm('确定要退出系统?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$router.replace('/login')
        window.sessionStorage.removeItem('token')
        window.sessionStorage.removeItem('username')
      })
    },
    myInfo () {
      this.$router.push('/admin/info')
    },
    toHome () {
      this.$router.push('/index')
    },
    modifyPwd () {
      this.dialogVisible = true
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 用于改变面包屑导航栏
    hiddenBread () {
      // document.getElementById('first').innerHTML = ' '
      // document.getElementById('second').innerHTML = ' '
      // document.getElementsByClassName('separate').innerHTML = ' '
    }
  },
  created () {
    this.hiddenBread()
    this.getAdminInfo()
  }
}
</script>

<style  scoped>
#Nav{
  position: fixed;
  width: 250px;
  top:0;
  left: 0;
  height: 100vh;
  background-color: #344a5f;
  -webkit-transition: all .3s ease 0s ;
}
#Header{
  padding: 10px 0;
  position: fixed;
  top:0;
  right: 0;
  left: 250px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 3px 16px 0 rgba(0,0,0,.1);
}
#Main{
  /*background-color: #f56c6c;*/
  /*width: 1000px;*/
  position: fixed;
  left: 250px;
  top: 75px;
  right: 0;
  bottom: 0;
  -webkit-box-sizing: border-box;
  padding: 30px;
  border: 30px solid #F7F7F7;
  border-bottom: none;
  overflow:scroll;
}
#home{
  background-color: #F7F7F7;
}
.left-button i{
  font-size: 30px;
  cursor: pointer;
  margin-top: 25px;
  margin-right: 20px;
}
.el-icon-s-fold {
  padding-left: 35px;
}
.el-icon-s-unfold
{
  padding-left: 35px;
}
#avatar_box{
  height: 100px;
  width: 100px;
  margin-left: 70px;
  margin-top: 20px;
  -webkit-transition: all .3s ease 0s ;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #eee;
}
.breadFont{
  color: #AAAFBB;
}
.separate{
  padding: 0 5px;
  color: #D3D2D5;
}
.breadHome{
  color: #49484B;
  cursor: pointer;
}
.nav-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  line-height: 50px;
  align-items: center;
}

.change {
  cursor: pointer;
  font-size: 26px;
}

.left-container {
  display: flex;
  justify-content: left;
  align-items: center;
}

.right-container {
  display: flex;
  justify-content: right;
  align-items: center;
}

.right-container .icon {
  cursor: pointer;
  width: 30px;
  height: 30px;
  margin-right: 15px;
}

.right-container .level {
  cursor: pointer;
  margin-right: 15px;
}

.right-container .dropdown {
  height: 40px;
}

.right-container .dropdown .avatar {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
.bread-container {
  margin-left: 20px;
  font-size: 15px;
  margin-top: -4px;
}
.modifyPwd{
  margin-right: 50px;
}
</style>
